<template>
  <div class="header">
    <div class="content">
        <div class="title">
            <router-link to="/home">苹果官方旗舰店</router-link>
        </div>
        <div class="nav">
            <router-link to="/mac">Mac</router-link>
            <router-link to="/ipad">iPad</router-link>
            <router-link to="/iphone">iPhone</router-link>
            <router-link to="/watch">Watch</router-link>
            <router-link to="/tech">技术支持</router-link>
        </div>
    </div>
  </div>
</template>
<script>
export default {
};
</script>
<style scoped>
.header{
    height: 50px;
    background: rgb(78, 76, 76);
    font-size: 1em;
}
.header .content{
    height: 50px;
    color: #fff;
    width: 68%;
    margin: 0 auto;   
    display: flex;
}
.header .content div{
    height: 100%;
    align-items: center;
}
.header .content .title{
    flex: 1;
    display: flex;
}
.header .content .nav{
    flex: 5;
    display: flex;
    justify-content: space-around;
}
</style>